﻿@model Lead2012.ViewModels.LeadViewModel

<div class="title nomargin">
    <h3>Hoạt động với khách hàng <span style="font-weight:normal;">Trạng thái hiện tại: <span id="status">@Model.Status</span> </span></h3>
</div>
<span id="groupActivity" class="toolbar">
    <span class="area button current"><a href="#action">Nhật ký trạng thái<span class="arr"></span></a></span>
    <span class="area button"><a href="#appointment">Nhật ký lịch hẹn<span class="arr"></span></a></span>
</span>

<div id="action" class="panel form-table">
    <div class="form-table-form form-table-appointment">
        <div class="row">
            <label for="actionType">Trạng thái:</label>
            <div id="takeAction" class="select-holder" style="width:275px">
                <select id="actionType" class="select" style="width:275px" data-bind="value:StatusId, foreach: StatusOptions">
                    <option data-bind="value: ID, text: ItemName"></option>
                </select>
            </div>
        </div>
        <div class="row">
            <label for="actionComment" style="vertical-align:top;">Ghi chú:</label>
            <textarea id="actionComment" maxlength="1000" class="text" type="text" style="width:255px; height:95px;" data-bind="value: Note"></textarea>
        </div>

        <div class="row">
            <a href="javascript:void(0)" class="btn btn-commit-action" data-bind="click: CommitAction">Commit Action</a>
        </div>
    </div>

    <div class="table form-table-table">
    <div class="title-up">Lịch sử trạng thái</div>
        <div class="title">
            <div class="col1">Ngày/giờ</div>
            <div class="col1 col2 action">Tiêu đề</div>
            <div class="col1 col3 action">Chi tiết</div>
        </div>

        <ul id="action-list" class="appointment-list" data-bind="foreach: StatusLogList">
            <li>
                <span class="col1" data-bind="text: DateDecs"></span>
                <span class="col1 col2 action" data-bind="text: Title"></span>
                <span class="col1 col3 action" data-bind="text: Detail"></span>
            </li>
        </ul>
    </div>

</div>

<div id="appointment" class="panel form-table" style="display:none">
    <div class="form-table-form form-table-appointment">
        <div class="row">
            <label for="subject">Tiêu đề:</label>
            <input class="text" type="text" id="subject" maxlength="100" data-bind="value: Subject" />
        </div>

        <div class="row">
            <label for="date">Ngày:</label>
            <input class="text cal" type="text" id="date" data-bind="value: Date" />
        </div>

        <div id="groupTime" class="row">
            <label for="time">Giờ bắt đầu:</label>
            <input class="text start-time" type="text" id="time" data-bind="value: Time" />

            <label for="duration" class="l-duration">Trong:</label>
            <div class="select-holder" style="width:100px">
                <select id="duration" name="durationSelect" style="width:100px" data-bind="value: Duration, foreach: DurationOptions">
                    <option data-bind="value: ID, text: ItemName"></option>
                </select>
            </div>
        </div>

        <div class="row">
            <label for="">Đặt 15 phút nhắc nhở:</label>
            <input id="rdyes" type="radio" name="reminder" class="radio" value="15 minutes" data-bind="checked: Reminder" /> <span class="spl">Có</span>
            <input id="rdno" type="radio" name="reminder" class="radio" value="0 minutes" data-bind="checked: Reminder" /> <span class="spl">Không</span>
        </div>

        <div class="row">
            <a class="btn btn-cancel-page" href="javascript:void(0)" data-bind="visible: GroupUpdateShow, click: CancelAppointment">cancel</a>
            <a href="javascript:void(0)" class="btn btn-update-appointment right" data-bind="visible: GroupUpdateShow, click: UpdateAppointment">Set Appointment</a>
            <a href="javascript:void(0)" class="btn btn-set-appointment" data-bind="visible: SetShow, click: SetAppointment">Set Appointment</a>
        </div>
    </div>

    <div class="table form-table-table">
    <div class="title-up">Lịch các cuộc hẹn</div>
        <div class="title">
            <div class="col1">Ngày/giờ</div>
            <div class="col1 col2">Tiêu đề</div>
            <span class="col1 colact"><span style="margin-right:22px;">Sửa</span><span style="margin-right:-5px;">Xóa</span></span>
        </div>
        <ul id="app-list" class="appointment-list" data-bind="foreach: LeadCalendarItems">
            <li>
                <span class="col1" data-bind="text: (StartDate + ' ' + StartTime)"></span>
                <span class="col1 col2" data-bind="text: Title"></span>
                <span class="col1 colact">
                    <!--ko if:ShowButton==true-->                    
                        <a href="javascript:void(0)" class="btn btn-editpen" data-bind="click: $parent.editLine">Edit</a>
                        <a href="javascript:void(0)" class="btn btn-x" data-bind="attr: { id: 'appointment' + Id, onclick: 'OpenModelConfirm(' + Id + ')' }" title="Bạn có chắc chắn muốn xóa cuộc hẹn này?">Delete</a>
                    <!--/ko-->
                </span>
            </li>
        </ul>
    </div>
</div>
<input type="hidden" id="appointmentId" value="" />

<script type="text/javascript">
    function OpenModelConfirm(id) {
        $("#appointmentId").val(id);
    }
</script>
